<script setup>
import { reactive, ref } from 'vue';
import * as api from '@/api/public';
import moment from 'moment';

let search = ref('')
const options = reactive([
  {
    value: "未出售"
  },
  {
    value: "已出售"
  },
  {
    value: "已入伙"
  },{
    value: "已入住"
  },
])
let houseStatus = ref('')


const init = () => {
    api.getData({
        page: 1,
        size : 10
    }, '/dept').then( res => {
        depts.push(...res.data)
    })
}

init()

const emits = defineEmits(['query'])

const query = () => {
    emits('query', {
        search: search.value,
        houseStatus: houseStatus.value,
     })
}

const reset = () => {
    search.value = ''
    houseStatus.value = ''
}

</script>
<template>
    <div class="component-box">
        <div class="left">
            <div class="item" >
              <span>房号</span>
                <el-input v-model="search" placeholder="请输入房号" style="width: 240px" >
                </el-input>
            </div>
           <div class="item">
              <span>房屋业态</span>
              <el-select v-model="houseStatus" placeholder="请选择房屋业态" style="width: 240px">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                />
              </el-select>
            </div>
        </div>
        <div class="right">
          <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="query">搜索</el-button>
        </div>
    </div>
</template>
<style lang="scss" scoped>
span{
  margin-right: 10px;
}
.component-box{
    display: flex;
    margin-top: 20px;
    margin-bottom: 12px;
    padding: 10px;
    padding-bottom: 0;
    box-sizing: border-box;
    border: 1px solid #c5c5c5;
    .left{
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        justify-content: flex-start;
        .item{
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }
    .right{
        display: flex;
        flex: 0.2;
        justify-content: flex-end;
        align-items: flex-end;
        margin-bottom: 10px;
    }
}
</style>
